import { defineComponent, ref, computed, watch, onMounted } from "vue";
import * as echarts from 'echarts';
import { getSvcAreaInvoke } from '@/api/statistics'
import '../style.scss'
export default defineComponent({
	name: 'AreaServiceInvoke',
	props: {
		time: {
			type: Object,
			default: () => { }
		},
		code: { // 地区code
			type: String,
			default: ''
		},
		refresh: {
			type: Number,
		},
		areas: {
			type: Array,
			default: () => []
		}
	},
	setup(props) {
		const chartEl = ref(null);
		const myChart = ref(null);
		const chartData = ref([])
		const xAxisData = ref([])
		const MAX = ref([])
		const option = computed(() => {
			return {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
					formatter: function (params, ticket, callback) {
						const item = params[1];
						return item.name + ' : ' + item.value;
					},
				},
				grid: {
					left: '20',
					right: '20',
					top: '20%',
					bottom: '20',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: xAxisData.value,
					axisLine: {
						show: false,

					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						fontSize: 12,
						color: 'rgba(133, 208, 235, 1)'
					},
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: 'rgba(189,221,255,0.15)',
						},
					},
					axisTick: {
						show: false,
					},
					splitNumber: 3,
					axisLabel: {
						color: 'rgba(133, 208, 235, 1)',
						fontSize: 12,
					},
					// boundaryGap: ['20%', '20%'],
				},
				series: [
					// 背景
					{
						type: 'custom',
						renderItem: (params, api) => {
							const location = api.coord([api.value(0), api.value(1)]);
							return {
								type: 'group',
								children: [
									{
										type: 'CubeLeft',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: 'rgba(42, 242, 252, 0.08)'
										},
									},
									{
										type: 'CubeRight',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: 'rgba(42, 242, 252, 0.08)'
										},
									},
									{
										type: 'CubeTop',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: 'rgba(42, 242, 252, 0.08)'
										},
									},
								],
							};
						},
						data: MAX.value,
					},
					// 图形
					{
						type: 'custom',
						renderItem: (params, api) => {
							const location = api.coord([api.value(0), api.value(1)]);
							const leftColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgba(27, 158, 165, 1)',
								},
								{
									offset: 1,
									color: 'rgba(58, 205, 209, 0)',
								},
							])
							const rightColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgba(22, 219, 229, 1)',
								},
								{
									offset: 1,
									color: 'rgba(22, 219, 229, 0)',
								},
							])
							const topColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgba(42, 242, 252, 1)',
								},
								{
									offset: 1,
									color: 'rgba(42, 242, 252, 1)',
								},
							])

							return {
								type: 'group',
								children: [
									{
										type: 'CubeLeft',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: leftColor,
										},
									},
									{
										type: 'CubeRight',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: rightColor,
										}
									},
									{
										type: 'CubeTop',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: topColor,
										},
									},
								],
							};
						},
						data: chartData.value,
					},
					// 高亮
					{
						type: 'custom',
						renderItem: (params, api) => {
							const location = api.coord([api.value(0), api.value(1)]);
							const leftColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgba(185, 136, 46, 1)',
								},
								{
									offset: 1,
									color: 'rgba(255, 166, 0, 0)',
								},
							])
							const rightColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgba(232, 161, 28, 1)',
								},
								{
									offset: 1,
									color: 'rgba(255, 166, 0, 0)',
								},
							])
							const topColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgba(255, 166, 0, 1)',
								},
								{
									offset: 1,
									color: 'rgba(255, 166, 0, 1)',
								},
							])
							return {
								type: 'group',
								children: [
									{
										type: 'CubeLeft',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: leftColor,
										},
									},
									{
										type: 'CubeRight',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: rightColor,
										}
									},
									{
										type: 'CubeTop',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: topColor,
										},
									},
								],
							};
						},
						data: customData.value,

					},
					{
						type: 'bar',
						label: {
							show: true,
							position: 'top',
							formatter: (e) => {
								return e.value;
							},
							fontSize: 16,
							color: 'rgba(255, 166, 0, 1)',
							fontweight: 'bolder',
							offset: [0, -10],
						},
						itemStyle: {
							color: 'transparent',
						},
						tooltip: {},
						data: customData.value,

					},

				],
			};
		});
		// 获取图表数据
		const customData = ref([])
		const getData = async () => {
			const { endDate, startDate } = props.time
			const para = {
				areaCode: props.code,
				endDate,
				startDate
			}
			const res = await getSvcAreaInvoke(para);
			if (res.status === 200) {
				customData.value = []
				res.data.y && res.data.y.map(item => {
					customData.value.push(null)
				})
				chartData.value = res.data.y
				const maxNum = res.data.y ?res.data.y.reduce((a, b) => {
					return parseFloat(b) > parseFloat(a) ? parseFloat(b) : parseFloat(a)
				}): 0
				MAX.value = []
				res.data.y?.map(item => {
					MAX.value.push(maxNum)
				})
				const xdata = []
				res.data.x?.map(item => {
					xdata.push(item.substring(0, 2))

				})
				xAxisData.value = xdata
			}
		};

		// 初始化echarts相关配置
		const init = () => {
			myChart.value = echarts.init(chartEl.value);
			myChart.value.setOption(option.value);
			const offsetX = 10;
			const offsetY = 5;
			// 绘制左侧面
			const CubeLeft = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0,
				},
				buildPath: function (ctx, shape) {
					// 会canvas的应该都能看得懂，shape是从custom传入的
					const xAxisPoint = shape.xAxisPoint;
					const c0 = [shape.x, shape.y];
					const c1 = [shape.x - offsetX, shape.y - offsetY];
					const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
					const c3 = [xAxisPoint[0], xAxisPoint[1]];
					ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
				},
			});
			// 绘制右侧面
			const CubeRight = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0,
				},
				buildPath: function (ctx, shape) {
					const xAxisPoint = shape.xAxisPoint;
					const c1 = [shape.x, shape.y];
					const c2 = [xAxisPoint[0], xAxisPoint[1]];
					const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
					const c4 = [shape.x + offsetX, shape.y - offsetY];
					ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
				},
			});
			// 绘制顶面
			const CubeTop = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0,
				},
				buildPath: function (ctx, shape) {
					const c1 = [shape.x, shape.y];
					const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
					const c3 = [shape.x, shape.y - offsetX];
					const c4 = [shape.x - offsetX, shape.y - offsetY];
					ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
				},
			});
			// 注册三个面图形
			echarts.graphic.registerShape('CubeLeft', CubeLeft);
			echarts.graphic.registerShape('CubeRight', CubeRight);
			echarts.graphic.registerShape('CubeTop', CubeTop);
		};

		watch(() => props.refresh, () => {
			getData()
		});
		const hightlightBar = (index) => {

			let res = []
			customData.value.map((item, i) => {
				if (index == i) {
					console.log(index, i, chartData.value[index])
					res.push(chartData.value[index])
				} else {
					res.push(null)
				}
			})
			return res
		}
		watch(() => props.code, (val) => {

			let index = -1

			props.areas.map(item => {
				if (item.areaCode == val) {
					let currentAreaName = item.areaName.substring(0, 2)
					index = xAxisData.value.findIndex(x => x == currentAreaName)
					customData.value = hightlightBar(index)
					myChart.value.clear()
					myChart.value.setOption(option.value);
				}
			})
		});
		onMounted(() => {
			init();
		});



		watch(() => chartData.value, () => {
			myChart.value.clear()
			myChart.value.setOption(option.value);
		});

		return () => <div ref={chartEl} style={{ width: '100%', height: '100%' }} />

	}
})